<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta charset="UTF-8">
		<title></title>
		<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/mobiscroll.min.css"/>
	</head>

	<body>

		<div class="container">
			<div style="height: 20px;"></div>

			<input type="text" class="form-control" id="demo" placeholder="Click">
			<select name="" id="demo2">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</select>
			<ul id="demo3" style="display:none">
			    <li>Sugar</li>
			    <li>Salt</li>
			    <li>Butter</li>
			    <li>Flour</li>
			    <li>Chocolate</li>
			</ul>

			<script src="js/mobiscroll.min.js" type="text/javascript"></script>
			<script type="text/javascript" src="js/mobiscroll.select.js" ></script>
			<script type="text/javascript" src="js/mobiscroll.treelist.js" ></script>
			<script type="text/javascript" src="js/mobiscroll.date.js" ></script>
			
			<script>
			
			var now = new Date(),
			    max = new Date(now.getFullYear() + 100, now.getMonth(), now.getDate());
			
			var instance = mobiscroll.date('#demo', {
			    theme: 'mobiscroll',
			    lang: 'zh',
			    display: 'bottom',
			    max: max
			});
			var instance3 = mobiscroll.treelist('#demo3', {
			    theme: 'ios',
			    lang: 'zh',
			    display: 'bottom',
			    labels: ['Ingredients'],
			    placeholder: 'Please Select ...',
			    width: 200
			});
			
			</script>

	</body>

</html>